const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin"); //index.html清理工具
const vueLoaderPlugin = require("vue-loader/lib/plugin"); //vueLoader
const miniCssExtractPlugin = require("mini-css-extract-plugin"); // css 分割
const autoPrefixer = require("autoprefixer"); // postCss 自动加浏览器浅灰

const os = require("os"); // os系统模块
const happyPack = require("happypack"); // 多线程编译 happyPack
const happyThreadPool = happyPack.ThreadPool({ size: os.cpus().length }); //定义线程池

//px2vw 配置信息
// const px2vwSetting = {
//   viewportWidth: 1920,
//   viewportHeight: 1080,
//   unitPrecision: 2,
//   viewportUnit: "vw",
//   miniPixelValue: 1,
// };

module.exports = {
  entry: {
    main: "./src/main.ts",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "happypack/loader?id=js",
        exclude: /node_modules/,
        include: path.resolve(__dirname, "../src"),
      },
      {
        test: /\.ts?$/,
        loader: "happypack/loader?id=ts",
        exclude: /node_modules/,
        include: path.resolve(__dirname, "../src"),
      },
      {
        test: /\.vue$/,
        use: "vue-loader",
        exclude: /node_modules/,
        include: path.resolve(__dirname, "../src"),
      },
      {
        test: /\.css$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                new autoPrefixer(),
                // new px2vw(px2vwSetting)
              ],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 1000 * 1024,
            name: "img/[name].[ext]?[hash:4]",
          },
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 200 * 1024,
            name: "font/[name].[ext]?[hash:4]",
          },
        },
      },
      {
        test: /\.less$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [new autoPrefixer()],
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.styl/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [new autoPrefixer()],
            },
          },
          "stylus-loader",
        ],
      },
    ],
  },
  plugins: [
    // happypack多线程压缩
    new happyPack({
      id: "js",
      use: [
        {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
          },
        },
      ],
      threadPool: happyThreadPool,
      verbose: false,
    }),
    new happyPack({
      id: "ts",
      use: [
        {
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
            happyPackMode: true,
          },
        },
      ],
      threadPool: happyThreadPool,
      verbose: false,
    }),
    new vueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // jquery，bootStrap依赖jquery
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"],
    }),
    new htmlWebpackPlugin({
      template: "./static/index.html",
      filename: "index.html",
      favicon: "./static/favicon.ico",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      chunksSortMode: "dependency",
      hash: true,
    }),
    new miniCssExtractPlugin({
      filename: "css/common.[hash:4].css",
      chunkFilename: "css/[id].[hash:4].css",
    }),
  ],
  resolve: {
    extensions: [".js", ".ts", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": path.resolve(__dirname, "../src"),
      "@ajax": path.resolve(__dirname, "../src/ajax"),
      "@component": path.resolve(__dirname, "../src/component"),
      "@decorator": path.resolve(__dirname, "../src/decorator"),
      "@mixin": path.resolve(__dirname, "../src/mixin"),
      "@view": path.resolve(__dirname, "../src/view"),
    },
  },
  performance: {
    hints: false,
  },
};
